<template>
  <div>
    <!-- 头部导航 -->
    <div class="header clearfix">
      <div class="logo fl">
        <router-link to="/" target="_blank"
          ><img src="../img/logp.svg" alt
        /></router-link>
      </div>
      <div class="fl header-con">活动数据管理中心</div>
      <div class="header-right fr">
        <div class="header-user-con">
          <div class="header-user-ind">
            <i class="iconfont icon-diqiu"></i>
            <router-link to="/" target="_blank">平台首页</router-link>
          </div>
          <div class="header-user-ind">
            <router-link to="/help" target="_blank"
              ><i class="iconfont icon-a-ziyuan16"></i>
              <span>帮助中心</span></router-link
            >
          </div>
          <!-- 消息中心 -->
          <div class="btn-bell">
            <div>
              <router-link to="/information">
                <i class="iconfont icon-a-ziyuan17"></i>系统消息
                <span class="btn-bell-bad" v-if="info.msg_num > 0"
                  >({{ info.msg_num }})</span
                >
              </router-link>
            </div>
          </div>
          <div class="btn renzheng">
            <el-button type="text" disabled>认证状态</el-button>
            <el-button type="primary" class="primary" v-if="info.is_cert == 1"
              >已认证</el-button
            >
            <router-link to="/verified" class="primary" v-else
              >去认证</router-link
            >
          </div>
          <!-- 用户头像 -->
          <div class="user-avator clearfix">
            <div class="fl">
              <img :src="'' + $api + info.avatar + ''" v-on:error.once="moveErrorImgSmall($event)"  alt="" />
            </div>
            <!-- <img src="../img/img/tx.png" /> -->
            <span class="el-dropdown-link">{{ info.nickname }}</span>
          </div>
          <!-- 用户名下拉菜单 -->
          <el-dropdown class="user-name pr">
            <span class="el-dropdown-link">
              退出
              <i class="iconfont icon-a-ziyuan18"></i>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="user">个人中心</el-dropdown-item>
                <el-button type="text" @click="loginout" class="tcdl"
                  >退出登录</el-button
                >
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
    </div>
    <!-- 手机端导航 -->
    <div class="phone_header">
      <div class="container">
        <div class="clearfix">
          <div class="fl logo">
            <router-link to="/dashboard" class="ta"
              ><img src="../img/logp.svg" class="phone_logo" alt="" />
            </router-link>
          </div>

          <div class="fr" @click="showPhoneMneu">
            <i class="iconfont icon-ego-menu"></i>
          </div>
          <div class="fr">
            <div class="btn renzheng">
              <el-button type="text" disabled>认证状态</el-button>
              <el-button type="primary" class="primary" v-if="info.is_cert == 1"
                >已认证</el-button
              >
              <router-link to="/verified" class="primary" v-else
                >去认证</router-link
              >
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 手机端菜单 -->
    <div class="phonemenu" v-show="isShow">
      <div class="container">
        <div class="top clearfix">
          <div class="fl">
            <router-link to="/index" class="ta"
              ><img src="../img/logp.svg" class="phone_logo" alt="" />
            </router-link>
          </div>

          <div class="fr" @click="hidePhoneMneu">
            <i class="iconfont icon-guanbi"></i>
          </div>
        </div>
        <v-Nav />
      </div>
    </div>
  </div>
</template>

<script>
import vNav from "./Nav.vue";
export default {
  components: {
    vNav,
  },
  data() {
    return {
      info: [],
      logout: [],
      isShow: false,
    };
  },
  methods: {
     moveErrorImgSmall: function (event) {
        event.currentTarget.src = require('../img/img/txx.png');
 },

    showPhoneMneu: function () {
      this.isShow = !this.isShow;
    },
    hidePhoneMneu: function () {
      this.isShow = !this.isShow;
    },
    getUserInfo() {
      var that = this;
      this.$axios
        .get(this.$api + "//api/user/userinfo")
        .then(function (response) {
          that.info = response.data.data;
          ////console.log(that.info);
        })
        .catch(function (error) {
          //console.log(error);
        });
    },
    loginout() {
      var that = this;
      this.$axios
        .post(this.$api + "//api/user/logout")
        .then(function (res) {
          if (res.data.code == 1) {
            //console.log("成功退出", res.data.data);
            // 登录成功
            that.$message({
              message: "成功退出",
              type: "success",
            });
            // 缓存token
            window.localStorage.setItem("token", "");
            window.localStorage.setItem("userid", "");

            // 跳转主页面
            that.$router.push("/");
          } else {
            that.$message.error(res.data.msg);
          }
        })
        .catch(function (error) {
          //console.log(error);
        });
    },
  },
  mounted() {
    this.getUserInfo();
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.phone_header {
  display: none;
}
.renzheng {
  padding: 0;
}
.renzheng .primary {
  padding: 0.625rem 0.9375rem;
  color: #fff;
}
.tcdl {
  list-style: none;
  line-height: 36px;
  padding: 0 20px;
  margin: 0;
  font-size: 14px;
  color: #606266;
  cursor: pointer;
  outline: 0;
}
.tcdl:hover {
  background-color: #ecf5ff;
  color: #66b1ff;
}
.header {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 3.75rem;
  line-height: 3.75rem;
  font-size: 0.75rem;
  color: #545556;
  background: #fff;
  padding: 0 35px 0 0;
}
.collapse-btn {
  float: left;
  padding: 0 1.3125rem;
  cursor: pointer;
}
.header .logo {
  width: 12.5rem;
  flex: left;
  text-align: center;
}
.header .logo img {
  width: 6.5625rem;
}
.header .header-con {
  font-size: 1.125rem;
  color: #000000;
}
.header-right .iconfont {
  color: #c2cfe0;
  font-size: 1.25rem;
}
.user-avator {
  margin-left: 20px;
}
.user-avator img {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  position: relative;
  top: -0.125rem;
}
.header-user-ind:hover,
.header-user-ind:hover i,
.header-user-ind:hover a {
  color: #4285f4;
}
.user-avator .el-dropdown-link {
  margin-left: 0.3125rem; 
  display: inline-block;
}
.header-user-con {
  display: flex;
  align-items: center;
}
.header-user-con > div {
  margin-left: 0.9375rem;
}
.header-user-con > div .iconfont {
  position: relative;
  top: 2px;
}
.header-user-con > div a {
  color: #545556;
}
.header .btn-bell,
.header .btn-fullscreen {
  position: relative;
  /* width: 30px;
    height: 30px; */
  text-align: center;
  border-radius: 15px;
  cursor: pointer;
}
.header .btn-bell .btn-bell-bad {
  color: #de5044;
}
.header .btn-bell .el-icon-bell {
  color: #545556;
}
.header .el-button.is-disabled {
  color: #545556;
  font-size: 0.875rem;
}
@media (max-width: 990px) {
  .phone_header {
    line-height: 60px;
    display: block;
    position: fixed;
    top: 0;
    left: 0%;
    width: 100%;
    z-index: 9900;
    box-shadow: 0 0 3px #ddd;
    background: #fff;
  }
  .renzheng {
    margin-right: 15px;
  }
  .phone_logo {
    height: 40px;
  }
  .phone_logo img {
    display: inline-block;
  }
  .phone_header .logo span,
  .phonemenu .top span {
    font-size: 14px;
    padding-left: 10px;
    color: #000000;
  }
  .phonemenu {
    position: fixed;
    left: 0;
    background: #fff;
    width: 100%;
    height: 100%;
    z-index: 9999;
    left: 0;
    top: 0;
    overflow: auto;
    overflow-x: hidden;
    transition: top ease 0.35s;
  }
  .phonemenu.active {
    top: 0;
    transition: top ease 0.35s;
  }
  .phonemenu .top {
    padding: 10px 0;
    line-height: 40px;
    border-bottom: 1px solid #ddd;
  }
  .phonemenu .top img {
    height: 40px;
  }
  .phonemenu .top .iconfont {
    display: block;
  }
  .phonemenu ul li {
    line-height: 50px;
    border-bottom: 1px solid #ddd;
  }
  .phonemenu ul li a {
    font-size: 14px;
    color: #767676;
  }
  .user-avator {
    margin-right: 20px;
    font-size: 14px;
  }
  .phone_header .fr .iconfont {
    font-size: 20px;
    display: block;
  }
}
</style>
